<template>
  <scroll-view scroll-y class="goods-list">
    <!-- 搜索框 -->
    <search-input />
    <!-- /搜索框 -->
    <!-- tabbar选项卡 -->
    <tab-bar @itemClick="itemClick" />
    <!-- /tabbar选项卡 -->
    <!-- 选项卡内容 -->
    <view class="tab-content" v-if="currentIndex === 0">
      <view 
        class="tab-content-item"
        v-for="(item, index) in goodsList"
        :key="index"
        @click="handleToDetail(item.goods_id)"
      >
        <view class="tab-item-pic">
          <image :src="item.goods_big_logo" mode="widthFix"></image>
        </view>
        <view class="tab-item-info">
          <view class="tab-item-name">{{ item.goods_name }}</view>
          <view class="tab-item-price">¥{{ item.goods_price }}</view>
        </view>
      </view>
    </view>
    <view class="tab-content" v-if="currentIndex === 1">
      2
    </view>
    <view class="tab-content" v-if="currentIndex === 2">
      3
    </view>
    <!-- /选项卡内容 -->
  </scroll-view>
</template>

<script>
  import searchInput from '@/components/searchInput.vue'
  import tabBar from '@/components/tabBar.vue'
  import { goodsList } from '../../utils/request.js'
  export default {
    data() {
      return {
        queryParmas: {
          query: "",
          cid: "",
          pagenum: 1,
          pagesize: 10
        },
        goodsList: [], // 商品列表数据
        currentIndex: 0 // 默认当前第0项被选中
      }
    },
    components: {
      searchInput,
      tabBar
    },
    onLoad (options) {
      this.queryParmas.cid = options.cid || ""
      this.queryParmas.query = options.query || ""
      this.loadData()
    },
    methods: {
      loadData() {
        goodsList({
          data: this.queryParmas
        }).then(res => {
          if (res.statusCode === 200) {
            this.goodsList = res.data.message.goods
            this.goodsList.map(v => {
              return v.goods_big_logo ? v.goods_big_logo : v.goods_big_logo = 'https://s1.ax1x.com/2020/09/25/0CEbNV.png'
            })
          }
        })
      },
      
      itemClick (index) {
        this.currentIndex = index
      },
      
      handleToDetail (id) {
        uni.navigateTo({
          url: `/pages/goodsDetail/goodsDetail?id=${id}`
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .tab-content {
    .tab-content-item {
      display: flex;
      border-bottom: 1rpx solid #eee;
      margin: 20rpx 0;
      .tab-item-pic {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 80%;
        }
      }
      .tab-item-info {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .tab-item-name {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .tab-item-price {
          color: #eb4450;
          font-size: 32rpx;
        }
      }
    }
  }
</style>
